<template>
  <div>
    <button @click="handleClick">点击增加</button>
    <button @click="handleClickPatch">点击增加 - patch</button>
    <button @click="handleClickMethod">点击增加 - $patch+函数</button>
    <button @click="handleClickActions">点击增加 - actions</button>
    <button @click="handleClickChangePhone">Getter缓存</button>
    <button @click="getList">Pinia中store的相互调用</button>
    <button @click="reset">reset</button>

  </div>
</template>
  
<script lang="ts">
import { mainStore } from "../store/index";

export default {
  setup() {
    const store = mainStore();
    const handleClick = () => {
      store.count++
    }

    const handleClickPatch = () => {
      // $ patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。
      // 所以如果你是多条数据同时更新状态数据，推荐使用$patch方式更新。
      store.$patch({
        count: store.count + 2,
        helloPinia: store.helloPinia === 'Hello Pinia!' ? 'Hello World!' : 'Hello Pinia!'
      })
    }

    const handleClickMethod = () => {
      store.$patch((state) => {
        state.count++
        state.helloPinia = state.helloPinia === 'Hello Pinia!' ? 'Hello World!' : 'Hello Pinia!'
      })
    }

    const handleClickActions = () => {
      store.changeState()
    }

    // 点击按钮的对应函数
    const handleClickChangePhone = () => {
      store.phone = "17800000000";
    }

    const getList = () => {
      store.getList();
    };

    //恢复默认值
    const reset = () => {
      store.$reset()
    }

    //监听变化值
    store.$subscribe((args, state) => {
      console.log(args, state);

    }, {
      detached: true
    })

    //监听action方法
    store.$onAction((args) => {
      // 最后执行
      args.after(() => {
        console.log('after');

      })
      console.log(args);
      args.onError((err) => {
        console.log(err);
      })
      // 组件销毁后依旧监听
    }, true)















    return {
      store,
      handleClick,
      handleClickPatch,
      handleClickMethod,
      handleClickActions,
      handleClickChangePhone,
      getList,
      reset
    }


  }

}
</script>
